<template>
  <div class="dialogForm-container">
    <el-dialog
      :title="'【' + warehouse.name + '】' + ' 区、位信息'"
      :visible.sync="dialogVisible"
      width="45%"
      :before-close="handleClose"
    >
      <!-- table表格，仓库区、位信息 -->
      <el-table :data="list">
        <el-table-column
          property="name"
          label="区名"
          width="80px"
          align="center"
        />
        <!-- 状态 -->
        <el-table-column label="状态" width="100px" align="center">
          <template slot-scope="{ row }">
            <el-tag
              :type="row.flag ? 'success' : 'danger'"
              style="cursor: pointer"
              @click="changeAreaState(row)"
            >{{ row.flag ? "启用" : "禁用" }}</el-tag>
          </template>
        </el-table-column>
        <!-- 位（状态） -->
        <el-table-column property="address" label="位（状态）" align="center">
          <template slot-scope="{ row }">
            <el-tag
              v-for="item in row.position"
              :key="item.id"
              :type="item.flag ? 'success' : 'danger'"
              style="margin-left: 2px; margin-top: 1px; cursor: pointer"
              effect="dark"
              @click="changeAreaPosition(item)"
            >
              {{ item.name }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!-- 底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DialogForm',
  data() {
    return {
      // 控制弹框的显示与隐藏
      dialogVisible: false,
      // 仓库信息
      warehouse: [],
      // 区、位信息
      list: []
    }
  },
  methods: {
    dialogOn(warehouse) {
      // 存储仓库信息
      this.warehouse = warehouse
      // 显示弹窗
      this.dialogVisible = true
    },
    // 关闭窗口
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => { })
    },
    // 改变Area状态
    async changeAreaState(row) {
      // 调用接口修改仓库-区状态
      const response = await this.$API.warehouse.modifyAreaState(row.id, row.flag ? 'false' : 'true')
      if (response.code === 200) {
        // 重新拉取弹窗内容（bug-fixed：直接将响应数据赋值给this.list，行不通）
        const response1 = await this.$API.warehouse.getDetail(this.warehouse.id)
        if (response1.code === 200) {
          this.list = response1.data
          // 弹窗提醒
          this.$message.success(response.msg)
        }
      } else {
        this.$message.error(response.msg)
      }
    },
    // 改变Position状态
    async changeAreaPosition(item) {
      console.log(item)
      // 调用接口修改仓库-区-位状态
      const response = await this.$API.warehouse.modifyPositionState(item.id, item.flag ? 'false' : 'true')
      if (response.code === 200) {
        // 重新拉取弹窗内容（bug-fixed：直接将响应数据赋值给this.list，行不通）
        const response1 = await this.$API.warehouse.getDetail(this.warehouse.id)
        if (response1.code === 200) {
          this.list = response1.data
          // 弹窗提醒
          this.$message.success(response.msg)
        }
      } else {
        this.$message.error(response.msg)
      }
    }
  }
}
</script>
